<!DOCTYPE html>
<html height100 xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <div th:replace="authority/common/currency/head"></div>
    <style type="text/css">
        h1, h2, h3 {
            padding: 10px 0;
        }

        /*a {*/
        /*text-align: right;*/
        /*font-size: 18px;*/
        /*color: #1C86EE;*/
        /*}*/

        .tree_contianer {
            width: 100%;
            height: 100%;
            color: #0C0C0C;
            /*border: 1px solid #9C9C9C;*/
            overflow: auto;
            padding: 5px 0 25px 0;
            margin-bottom: 10px;
            /*background-color: #fff;*/
        }

        .icon-hide {
            display: none;
        }

        .nav-tree-div {
            white-space: nowrap;
        }

        /*.tree_contianer .nav-tree-item {*/
        /*padding-left: 0;*/
        /*}*/

        /*.tree_contianer .nav-tree-div {*/
        /*padding-left: 15px;*/
        /*}*/

        .zsa-nav {
            background: #FFF;
            overflow: hidden;
            height: 100%;
            padding-bottom: 75px;
            border-right: 1px solid #e6e6e6;
        }

        .zsa-nav form {
            height: 100%;
        }

        .zsa-nav .layui-this {
            background-color: #fff;
        }

        .zsa-nav .zsa-nav-title {
            color: #666;
            font-size: 20px;
            padding: 0 20px;
            border-bottom: 1px solid #e6e6e6;
        }

        .zsa-page-content {
            padding-left: 199px;
        }

        .zsa-page-content .layui-tab {
            margin: 0;
        }

        .zsa-page-content .layui-tab-title {
            height: 44px;
        }

        .zsa-page-content .layui-tab-title li {
            line-height: 48px;
        }

        .zsa-page-content .layui-tab-title .layui-this:after {
            height: 40px;
            top: 5px;
        }

        .zsa-page-content .x-so, .zsa-page-content xblock {
            text-align: left;
            margin-bottom: 5px;
        }

        .zsa-page-content xblock {
            margin-bottom: 0;
        }

        .zsa-page-content .zsa-btn {
            height: 36px;
            padding: 0 12px;
        }

        .layui-form-pane div[pane] {
            position: relative;
            border: 1px solid #e6e6e6;
        }
    </style>
</head>
<body class="childrenBody">
<ul class="layui-nav layui-nav-tree layui-nav-side zsa-nav">
    <li class="layui-nav-item zsa-nav-title">角色列表</li>
    <ul id="role-container" class="tree_contianer"></ul>
</ul>
<div class="zsa-page-content">
    <div class="layui-tab" lay-filter="page-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">用户管理</li>
            <li>权限关联</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show" id="table-content">
                <div class="layui-row">
                    <div class="layui-col-sm6" style="padding-right: 10px">
                        <div id="binding-seach-container"></div>
                        <table id="binding-user-table" lay-filter="binding-user-table"></table>
                    </div>
                    <div class="layui-col-sm6" style="padding-left: 10px">
                        <div id="not-seach-container"></div>
                        <table id="not-user-table" lay-filter="not-user-table"></table>
                    </div>
                </div>
            </div>
            <div class="layui-tab-item" id="tree-content">
                <xblock>
                    <button class="layui-btn layui-btn-normal layui-btn-sm" id="power-save"><i class="layui-icon">&#xe605; </i>保存
                    </button>
                    <button class="layui-btn layui-btn-sm" id="power-refresh"><i class="layui-icon"
                                                                                 style="line-height:30px">&#xe669;</i>
                    </button>
                </xblock>
                <form class="layui-form">
                    <ul id="power-container" class="tree_contianer"></ul>
                </form>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="sys_toolbarDemo">
    <button class="layui-btn layui-btn-sm" lay-event="sys_toolbar_search">搜索</button>
    <button class="layui-btn layui-btn-sm" lay-event="sys_toolbar_refresh">
        <i class="layui-icon" style="line-height:30px">&#xe669;</i>
    </button>
</script>
<script type="text/html" id="binding-bar">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="untie"><i class="layui-icon">&#x1006;</i>解绑&nbsp;</a>
</script>
<script type="text/html" id="not-bar">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="binding"><i
            class="layui-icon">&#xe605;</i>绑定&nbsp;</a>
</script>

<div th:replace="authority/common/currency/footer"></div>
<script>

    layui.extend({
        complexSearch: 'complexSearch/complexSearch' // {/}的意思即代表采用自有路径，即不跟随 base 路径
        , dtree: 'dtree/dtree'
    })
    layui.link(layui.cache.base + 'dtree/dtree.css?v=' + (layui.cache.version ? layui.cache.version : '1'));
    layui.link(layui.cache.base + 'dtree/font/dtreefont.css?v=' + (layui.cache.version ? layui.cache.version : '1'));
    layui.use(['lutil', 'form', 'table', 'element', 'complexSearch', 'dtree'], function () {
        var form = layui.form, dtree = layui.dtree, lutil = layui.lutil, element = layui.element
            , layer = layui.layer, table = layui.table, complexSearch = layui.complexSearch;

        var binding_search = complexSearch.render({
            container: "#binding-seach-container",
            isDynamic: false,
            submit: false,
            returnFormat: {
                dataTypeName: 'type'
            },
            data: [
                {field: 'name', title: '姓名', editType: 'text', dataType: 'string', formulas: ['<->']},
            ],
            search: function (data) {
                var binding_table = layui.pageObtainTable('binding-user-table');
                binding_table && binding_table.query({searchs: data.length > 0 ? JSON.stringify(data) : ''});
            }
        });
        var not_search = complexSearch.render({
            container: "#not-seach-container",
            isDynamic: false,
            submit: false,
            returnFormat: {
                dataTypeName: 'type'
            },
            data: [
                {field: 'name', title: '姓名', editType: 'text', dataType: 'string', formulas: ['<->']},
            ],
            search: function (data) {
                var not_table = layui.pageObtainTable('not-user-table');
                not_table && not_table.query({searchs: data.length > 0 ? JSON.stringify(data) : ''});
            }
        });
        var roleData, treeFindData = function (data, id) {
            var result = undefined;
            return $.each(data, function (i, e) {
                if (id == e['id']) return result = e, false;
                if (e['children']) if (!(result = treeFindData(e['children'], id))) return false;
            }), result;
        };
        var roleTree = dtree.render({
            elem: "#role-container",
            icon: "1",
            skin: "layui",
            initLevel: 3,
            headers: {'[[${_csrf.headerName}]]': '[[${_csrf.token}]]'},
            url: content_path + 'authority/role/role_tree.do',
            dataStyle: "layuiStyle",
            response: {statusCode: 0, title: 'name'},
            parseData: function (data) {
                roleData = $.extend({}, data, true);
                return data;
            }
        });
        dtree.on("node('role-container')", function (res) {
            var param = res.param;
            // var currentData = treeFindData(roleData, param['nodeId']);
            // if (!currentData || currentData['isFirst']) param['nodeId'] = '';
            if ($("#table-content").hasClass("layui-show")) {
                var binding_table = layui.pageObtainTable('binding-user-table'),
                    not_table = layui.pageObtainTable('not-user-table');
                binding_table && binding_table.query({roleId: param['nodeId']}), not_table && not_table.query({roleId: param['nodeId']});
            } else {
                dtree.reload(power_tree, {request: {roleId: param['nodeId']}});
            }
        });

        var power_tree = dtree.render({
            elem: "#power-container",
            icon: "2",
            checkbar: true,
            checkbarType: "all",
            checkbarData: 'change',
            initLevel: 10,
            skin: "layui",
            headers: {'[[${_csrf.headerName}]]': '[[${_csrf.token}]]'},
            url: content_path + 'authority/role/power_tree.do',
            dataStyle: "layuiStyle",
            response: {statusCode: 0, title: 'name'},
            success: function (data, obj) {
                function parse(data) {
                    $.each(data, function (i, e) {
                        e['checkArr'] = {"type": "0", "isChecked": e['checked']};
                        if (e['children']) parse(e['children']);
                    });
                }

                parse(data.data);
                return data;
            }
        });

        table.set({
            method: 'POST',
            defaultToolbar: [],
            cellMinWidth: '100',
            page: true,
            limit: 10,
            limits: [5, 10, 20, 30, 50],
            text: {
                none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
            },
            even: true,
            // skin: 'line',
            headers: {'[[${_csrf.headerName}]]': '[[${_csrf.token}]]'},
            request: {
                pageName: 'page' //页码的参数名称，默认：page
                , limitName: 'pageSize' //每页数据量的参数名，默认：limit
            },
            response: {
                // statusName: 'success' //数据状态的字段名称，默认：code 加上有问题
                statusCode: 0 //成功的状态码，默认：0
                , msgName: 'message' //状态信息的字段名称，默认：msg
                , countName: 'total' //数据总数的字段名称，默认：count
                , dataName: 'data' //数据列表的字段名称，默认：data
            }
        });
        var binding_height = $(window).height() - $('#binding-seach-container').outerHeight() - 65,
            binding_height_value = parseInt(binding_height) > 300 ? parseInt(binding_height) : 300;
        layui.page_table_examples.push(table.render({
            elem: '#binding-user-table',
            url: content_path + 'authority/role/role_users.do',
            height: binding_height_value,
            toolbar: '#sys_toolbarDemo',
            title: '用户列表',
            where: {type: 1},
            cols: [
                [//标题栏
                    {type: 'checkbox', fixed: 'left'},
                    // {field: 'id', title: 'ID', fixed: 'left', width: 100},
                    {field: 'name', title: '用户名', sort: true, fixed: 'left', width: 150},
                    {field: 'account', title: '账号', sort: true, width: 100},
                    {
                        field: 'sex', title: '性别', sort: true, templet: function (d) {
                            return '<span>' + (d.sex == 0 ? '女' : '男') + '</span>';
                        }, align: 'center', width: 65
                    },
                    {field: 'idCard', title: '身份证号码', minWidth: 150},
                    {field: 'phone', title: '手机号码', minWidth: 110},
                    {field: 'cz', title: '操作', width: 90, toolbar: "#binding-bar", fixed: 'right', align: 'center'}
                ]
            ]
        }));
        var not_height = $(window).height() - $('#not-seach-container').outerHeight() - 65,
            not_height_value = parseInt(not_height) > 300 ? parseInt(not_height) : 300;
        layui.page_table_examples.push(table.render({
            elem: '#not-user-table',
            url: content_path + 'authority/role/role_users.do',
            height: not_height_value,
            toolbar: '#sys_toolbarDemo',
            title: '用户列表',
            where: {type: 0},
            cols: [
                [//标题栏
                    {type: 'checkbox', fixed: 'left'},
                    // {field: 'id', title: 'ID', fixed: 'left', width: 100},
                    {field: 'name', title: '用户名', sort: true, fixed: 'left', width: 150},
                    {field: 'account', title: '账号', sort: true, width: 100},
                    {
                        field: 'sex', title: '性别', sort: true, templet: function (d) {
                            return '<span>' + (d.sex == 0 ? '女' : '男') + '</span>';
                        }, align: 'center', width: 65
                    },
                    {field: 'idCard', title: '身份证号码', minWidth: 150},
                    {field: 'phone', title: '手机号码', minWidth: 110},
                    {field: 'cz', title: '操作', width: 90, toolbar: "#not-bar", fixed: 'right', align: 'center'}
                ]
            ]
        }));
        $.each(layui.page_table_examples, function (i, e) {
            var id = e.config.id || e.config.index;
            if (!id) return true;
            table.on('sort(' + id + ')', function (obj) {
                e && e.sort(obj);
            });
            table.on('toolbar(' + id + ')', function (obj) {
                var checks = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'sys_toolbar_refresh':
                        e && e.refresh();
                        break;
                    case 'sys_toolbar_search':
                        id.indexOf('binding') >= 0 ? binding_search.submit() : not_search.submit();
                        break;
                }
            });
            table.on('tool(' + id + ')', function (obj) {
                switch (obj.event) {
                    case 'untie':
                    case 'binding':
                        var where = e.getParams();
                        var load = layer.load(1), params = {
                            roleId: where.roleId,
                            userIds: obj.data.id,
                            type: obj.event
                        };
                        var successFunc = function () {
                                dtree.reload(roleTree, {async: false}), dtree.dataInit(roleTree, where.roleId);
                                $.each(layui.page_table_examples, function (i, item) {
                                    if ((e.config.id || e.config.index).indexOf('-user-table') > 0) item && item.refresh();
                                })
                            },
                            completeFunc = function () {
                                layer.close(load);
                            };
                        ajaxRequestByCsrf(content_path + 'authority/role/change_user_rel.do', params, successFunc, null, completeFunc);
                        break;
                }
            });
        });

        element.on('tab(page-tab)', function (data) {
            var check = dtree.getNowParam(roleTree), roleid = check && check['nodeId'] ? check['nodeId'] : ''
                , treeNodeData = treeFindData(roleData, roleid);
            // if (!treeNodeData || treeNodeData['isFirst']) roleid = '';
            if ($("#table-content").hasClass("layui-show")) {
                var binding_table = layui.pageObtainTable('binding-user-table'),
                    not_table = layui.pageObtainTable('not-user-table');
                binding_table && binding_table.query({roleId: roleid}), not_table && not_table.query({roleId: roleid});
            } else {
                dtree.reload(power_tree, {request: {roleId: roleid}});
            }
        });

        $('#power-save').click(function (e) {
            var check = dtree.getNowParam(roleTree), roleid = check && check['nodeId'] ? check['nodeId'] : '',
                checks = dtree.getCheckbarNodesParam(power_tree), powerIds = [], params = {roleId: roleid};
            $.each(checks, function (i, e) {
                powerIds.push({id: e['nodeId'], state: e['ischecked']});
            });
            var loding = layer.load(2, {shade: [0.3, '#eee']});
            params['powerIds'] = JSON.stringify(powerIds);
            ajaxRequestByCsrf(content_path + 'authority/role/change_power_rel.do', params, function (res) {
                dtree.reload(roleTree, {async: false}), dtree.dataInit(roleTree, roleid);
                dtree.reload(power_tree);
            }, null, function () {
                layer.close(loding);
            });
        });

        $('#power-refresh').click(function (e) {
            dtree.reload(power_tree);
        });
    })

</script>
</body>
</html>